<template>
	<view class="container">
		<view class="avator">
			<view class="con" v-if="token">
				<!-- #ifdef MP-WEIXIN -->
				<image :src="userInfo.avatar" mode="" @click="navTo('/pages/user/detail/info')"></image>
				<!-- #endif -->
				<!-- #ifdef MP-ALIPAY -->
				<image :src="userInfo.avatar" mode="scaleToFill" @click="navTo('/pages/user/detail/info')"></image>
				<!-- #endif -->
				<text>{{ userInfo.nickname }}</text>
				<text>{{ userInfo.mobile }}</text>
			</view>
			<view class="avator" style="padding: 20rpx 40rpx;color: #ffffff;" v-if="!token" @click="bindgetuserinfo">授权登录</view>
		</view>

		<view class="list">
			<view class="list_item" @click="navTo('/pages/user/detail/yue')">
				<view class="item_l">
					<image src="/static/img/detail/yue-select.png" mode="widthFix"></image>
					<text>余额</text>
				</view>
				<view class="item_r">
					<image src="/static/img/detail/right.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="list_item" @click="isdeposit">
				<view class="item_l">
					<image src="/static/img/detail/yue-yajin.png" mode="widthFix"></image>
					<text>押金</text>
				</view>
				<view class="item_r">
					<image src="/static/img/detail/right.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="list_item" @click="navTo('/pages/user/detail/free')">
				<view class="item_l">
					<image src="/static/img/money/reCharge.png" mode="widthFix"></image>
					<text>我的免单券</text>
				</view>
				<view class="item_r">
					<image src="/static/img/detail/right.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="list_item" @click="navTo('/pages/user/detail/card')">
				<view class="item_l">
					<image src="/static/img/money/reCharge.png" mode="widthFix"></image>
					<text>我的折扣券</text>
				</view>
				<view class="item_r">
					<image src="/static/img/detail/right.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="list_item" @click="navTo('/pages/user/detail/numCard')">
				<view class="item_l">
					<image src="/static/img/money/reCharge.png" mode="widthFix"></image>
					<text>我的次卡</text>
				</view>
				<view class="item_r">
					<image src="/static/img/detail/right.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="list_item" @click="navTo('/pages/user/detail/use')">
				<view class="item_l">
					<image src="/static/img/user/battery.png" mode="widthFix"></image>
					<text>使用记录</text>
				</view>
				<view class="item_r">
					<image src="/static/img/detail/right.png" mode="widthFix"></image>
				</view>
			</view>
		</view>

		<view class="list">
			<!-- <view class="list_item" @click="navTo('/pages/user/detail/recommend')">
				<view class="item_l">
					<image src="/static/img/user/recommend.png" mode="widthFix"></image>
					<text>推荐</text>
				</view>
				<view class="item_r">
					<image src="/static/img/detail/right.png" mode="widthFix"></image>
				</view>
			</view> -->
			<view class="list_item" @click="navTo('/pages/user/detail/cooperation')">
				<view class="item_l">
					<image src="/static/img/user/cooperation.png" mode="widthFix"></image>
					<text>合作加盟</text>
				</view>
				<view class="item_r">
					<image src="/static/img/detail/right.png" mode="widthFix"></image>
				</view>
			</view>
		</view>

		<view class="list">
			<view class="list_item" @click="navTo('/pages/user/detail/about')">
				<view class="item_l">
					<image src="/static/img/user/about.png" mode="widthFix"></image>
					<text>关于我们</text>
				</view>
				<view class="item_r">
					<image src="/static/img/detail/right.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="list_item" @click="navTo('/pages/user/detail/contact')">
				<view class="item_l">
					<image src="/static/img/user/contact.png" mode="widthFix"></image>
					<text>联系我们</text>
				</view>
				<view class="item_r">
					<image src="/static/img/detail/right.png" mode="widthFix"></image>
				</view>
			</view>
		</view>

		<!-- <view class="list">
			<view class="list_item" @click="switchTo('pages/agent/index')">
				<view class="item_l">
					<image src="/static/img/user/daili.png" mode="widthFix"></image>
					<text>代理商.管理系统</text>
				</view>
				<view class="item_r">
					<image src="/static/img/detail/right.png" mode="widthFix"></image>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import { wxLogin, isdeposit, getUserInfo } from '../../api/api.js';
	export default {
		data() {
			return {
				userInfo: {},
				token: null,
			};
		},
		onLoad() {},
		onShow() {
			this.token = uni.getStorageSync('token');
			this.getInfo();
		},
		methods: {
			bindgetuserinfo() {
				uni.getUserProfile({
					desc: '正在获取',
					success: info => {
						// 获取code
						uni.login({
							provider: 'weixin',
							success: res => {
								wxLogin({
									rawData: info.rawData,
									code: res.code,
									iv: info.iv
								}).then(res => {
									if (res.code == 1) {
										uni.showToast({
											icon: 'none',
											title: '授权成功'
										});
										uni.setStorageSync('token', res.data.userInfo
											.token);
										this.token = res.data.userInfo.token;
										this.getInfo()
									}
								});
							}
						});
					},
					fail: e => {
						console.log(e);
					}
				});
			},
			navTo(uri) {
				uni.navigateTo({
					url: uri
				});
			},
			switchTo(url) {
				console.log(url);
				uni.switchTab({
					url: '/pages/agent/index'
				});
			},
			getInfo() {
				getUserInfo().then(res => {
					console.log(res);
					this.userInfo = res.data;
					uni.setStorageSync('user', res.data);
				});
			},
			isdeposit() {
				isdeposit().then(res => {
					let is_deposit = res.data.is_deposit;
					// 如果支付了押金，进入押金退回页面
					if (is_deposit == 1) {
						uni.navigateTo({
							url: '/pages/user/detail/drawal'
						})
					}
					// 如果没有支付押金，进入押金支付页面
					else if (is_deposit == 0) {
						uni.showToast({
							title: '未支付押金',
							icon: 'none'
						})
						// uni.navigateTo({
						// 	url: '/pages/deposit/deposit'
						// })
					}
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;
		background-color: #f8f8f4;
	}

	.avator {
		width: 100%;
		height: 350upx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #8faeb3;

		.con {
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 160upx;
				height: 160upx;
				margin-bottom: 20upx;
				border-radius: 50%;
			}

			text {
				color: #ffffff;
			}
		}
	}

	.list {
		width: 100%;
		margin-top: 20upx;
		background-color: #ffffff;

		.list_item {
			width: 90%;
			margin: 0 auto;
			height: 90upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1upx solid #f8f6f7;

			image {
				width: 30upx;
			}

			.item_l {
				min-width: 100upx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				image {
					margin-right: 20upx;
				}
			}

			.item_r {
				image {
					width: 15upx;
				}
			}
		}
	}
</style>